<template>
  <view class="product-block" @click="$emit('click')">
    <v-image
      height="190rpx"
      width="190rpx"
      border-radius="16rpx"
      :src="product.image"
      mode="aspectFill"
    />
    <view class="product-info">
      <view class="main-info">
        <text>{{ product.name }}</text>
      </view>
      <template v-if="sub === 'markprice'">
        <view v-if="product.min_market_price" class="market-price">
          {{ `¥${product.min_market_price.toFixed(2)}` }}
        </view>
      </template>
      <template v-else-if="sub === 'quantity'">
        <view class="quantity">
          {{ `已售${product.sales_volume || 0}件` }}
        </view>
      </template>
      <view class="sub-info">
        <view class="product-price">
          <v-price size="36rpx" :price="product.min_sell_price" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    product: SpuVO;
    sub?: 'markprice' | 'quantity';
  }>(),
  {
    sub: 'markprice'
  }
);

defineEmits<{
  click: [];
}>();
</script>

<style lang="scss" scoped>
.product-block {
  height: 214rpx;
  box-sizing: border-box;
  padding: 12rpx;
  display: flex;
  border-radius: 16rpx;
  background-color: white;
  gap: 20rpx;
  .product-info {
    padding: 12rpx 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .main-info {
      font-size: 26rpx;
      font-weight: bold;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
    .market-price {
      margin-bottom: 20rpx;
      font-size: 24rpx;
      color: #999999;
      text-decoration: line-through;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }
    .quantity {
      margin-bottom: 20rpx;
      font-size: 24rpx;
      color: #999999;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }
    .sub-info {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      .product-price {
        display: flex;
        gap: 8rpx;
        align-items: baseline;
        .label {
          font-size: 24rpx;
          color: #ff2f3b;
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
